<template>
  <transition name="fade">
    <scroll id="detail" ref="scrollDetail" :data="detail.casts">
      <div>
        <div class="content">
          <img class="background" v-lazy="detail.images.large">

          <div class="desc">
            <img width="150px" height="217px" v-lazy="detail.images.large">
            <div class="text">
              <h2 class="title">{{detail.title}}</h2>
              <div class="aka">{{detail.aka[detail.aka.length - 1]}}</div>
              <div class="average">{{detail.rating.average}} 分</div>
              <div class="year">{{detail.year}} 年上映</div>
            </div>
          </div>
        </div>
        <div class="summary" v-html="detail.summary"></div>
        <div class="casts">
          <h2 class="title">主创</h2>
          <scroll class="wrapper" :data="detail.casts" :scrollX="true">
            <ul class="wrapper-box" ref="wrapperBox">
              <li class="item" v-for="cast in detail.casts">
                <img v-lazy="cast.avatars.large" alt="">
                <p>{{cast.name}}</p>
              </li>
            </ul>
          </scroll>
        </div>
      </div>

    </scroll>
  </transition>

</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import scroll from '@/base/scroll/scroll'
  import {getDetail} from "@/api/home"
  export default {
    data() {
      return {
        detail: {
          images: '',
          aka: [],
          rating: {},
          casts: []
        }

      }
    },
    mounted() {
      this._getDetail(this.$route.params.id)
    },
    methods: {
      computedWidth() {
        let casts = this.detail.casts
        let w = 76 + 16
        this.$nextTick(() => {
          this.$refs.wrapperBox.style.width = w * casts.length + 'px'
        })
      },
      async _getDetail(id) {
        try {
          let res = await getDetail(id)
          this.detail = res.data;
          this.computedWidth()
        } finally {

        }
      }
    },
    components: {
      scroll
    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "~@/assets/css/color.styl"

  .fade-enter-active, .fade-leave-active {
    transition: all .5s
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */
  {
    transform translate3d(100%, 0, 0)
  }

  #detail {
    position fixed
    left: 0
    right: 0
    bottom: 0
    top: 0
    background-color $bg-color
    .content {
      width 100%
      overflow: hidden;
      height: 270px;
      position: relative;
      box-shadow: 0 0 10px #111;
      border-bottom: solid 1px #000;
      background-color: #222;
      .background {
        position absolute
        left 0
        top: 0
        width 100%
        height 100%
        filter: blur(10px);
        opacity: 0.7;
      }
      .desc {
        position absolute
        left 15px
        right 15px
        top: 15px
        bottom: 15px
        display flex
        .text {
          flex 1
          margin-left 20px
          color #fff
          .title {
            font-size 28px
            line-height 30px
          }
          .aka {
            margin-top 20px
            height: 20px
          }
          .average {
            margin-top 30px
            font-size 18px
            color #FFC125
            height: 20px
          }
          .year {
            margin-top 20px
            font-size 12px
            height: 20px
          }

        }
      }

    }
    .summary {
      min-height 80px
      font-size: 14px;
      line-height: 16px;
      padding: 10px 10px 20px 10px;
      color: #fafafa;
      background-color: #222;
    }
    .casts {
      min-height 220px
      .title {
        padding 10px
        font-size 16px
        line-height 20px
        color #fff
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#2f2f2f));
      }
      .wrapper {
        margin-top 20px
        color #fff
        overflow hidden
        white-space nowrap
        text-align center
        .wrapper-box {
          font-size 0
          overflow hidden
          .item {
            float left
            margin 8px
            img {
              width 76px
              height 111px
              box-shadow: 3px 3px 4px #111;
            }
            p {
              width 76px
              margin-top 10px
              font-size 12px
              white-space nowrap
              overflow hidden
            }
          }
        }

      }

    }
  }


</style>
